
<div id="footer">
      <div class= "container">
        <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>

<style type="text/css">
  #footer {
    background-color: #F5F5F5;
    height: 60px;
  }

.container .credit {
    margin: 20px 0;
}

#wrap {
    height: auto !important;
    margin: 0 auto -60px;
    min-height: 100%;
    padding: 0 0 60px;
}

.container .credit {
    margin: 20px 0;
}
</style>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="bootstrap/assets/js/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>


    <script type="text/javascript">
  $(document).ready(function(){

    $('#chk_pid').on('click',function(){
    //alert($(this).is(':checked'));
      var action = $(this).is(':checked');
      $('.chk').each(function(i,j){
        //console.log(i);
        //console.log(j);
        $(this).prop('checked',action);
      })
    });//end click #chk_pid


    /*****
    * Child Checkbox Checked/Uncheck
    */
    $('.chk').on('click',function(){

      var action = $(this).is(':checked');
      var flag = false;
      if(action == true){
        var allchk = $('.chk').size();
        var allChildChk = $('.chk:checked').size();
        if(allchk == allChildChk){
          var flag = true;
        }
      }

      $('#chk_pid').prop('checked',flag);

    });//end click .chk

    $('input[type="submit"]#delAllId').on('click',function(){

      var allChildChk = $('.chk:checked').size();

      if(allChildChk == 0){
        alert("Please check atleast one checkbox");
        return false;
      }

      var flag = confirm('Are you sure to delete '+allChildChk +' user(s) ?');

      // user didn't want to delete
      if(flag == false) {
        return false;
      }


    });

  });
</script>



  </body>
</html>
